<@override name="contest_content">
<#assign type="Private<sup>${contest.type}</sup>">
<#if contest.type==0>
<#assign type="Public">
</#if>
<h3 class="text-center">${type} Contest ${contest.cid!}: ${contest.title!}</h3>
<div class="row text-center">
  <div class="span6 offset3">
    <div class="contest-admin">
      <a href="contest/admin/${contest.cid!}" class="btn btn-primary">Manage Problems</a>
    </div>
    <div class="well">
      <span>Start time</span>: <span class="time">${contest.startDateTime!}</span> 
      <span>End time</span>: <span class="time">${contest.endDateTime!}</span><br>
      <span>Current System Time</span>: <span class="time" id="current">${contest.startDateTime!}</span> 
      <span>Contest Status</span>: <span class="status ${status!}">${status!}</span>
    </div>
  </div>
</div>
<div class="row text-center">
  <div class="span4 offset4">
    <p>${contest.description!}</p>
  </div>
</div>

<div class="row">
  <div class="span8 offset2">
    <table id="user-list" class="table table-hover table-condensed">
      <thead>
        <tr>
          <th>UID</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <#if contestUsers??>
        <#list contestUsers as User>
        <tr class="user" uid="${User.uid!}">
          <td class="pid">
            <a href="user/profile/${User.name!}" title="${User.realName!}">${User.uid!}</a>
          </td>
          <td class="name"><a href="user/profile/${User.name!}">${User.name!}</a></td>
          <td class="admin"><button class="btn btn-danger remove" uid="${User.uid!}">Remove</button></td>
        </tr>
        </#list>
        </#if>
        <#if serverTime<contest.endTime>
        <tr>
          <form class="form-inline" id="addUser" action="api/contest/addUser" method="post">
          <input type="hidden" name="cid" value="${contest.cid!}"><span class="id"></span>
          <td><input type="number" name="uid" class="input-small" placeholder="User ID" required></td>
          <td><input type="text" name="name" class="input-large" placeholder="Name" required></td>
          <td>
            <button type="submit" class="btn btn-success">Add</button></td>
          </form>
        </tr>
        </#if>
      </tbody>
    </table>
  </div>
</div>

</@override>

<@override name="styles">
  <link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css" type="text/css">
</@override>
<@override name="scripts">
<link href="assets/tablecloth/css/tablecloth.css" rel="stylesheet" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script src="assets/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    var current_time = ${serverTime!}*1000;
    function updateTime() {
      current_time+=1000;
      $("#current").html(new Date(current_time).format("yyyy-MM-dd hh:mm:ss"));
    }
    setInterval(updateTime, 1000);
    
    function getUserName() {
      var uid = this.value;
      if (uid >= 1000)
      {
        $.get("api/user/getField", { name: "name", uid: this.value },
          function(data) {
            $("input[name='name']").val(data.result);
          });
       }
       esle
       {
        $("input[name='name']").val('');
       }
    }
    $("input[name='uid']").change(getUserName).keyup(getUserName);
    $("input[name='name']").keyup(function() {
      var name = this.value;
      if (name.length >= 4) // for old user name, e.g: 'test'
      {
        $.get("api/user/getUid", { name: this.value },
          function(data) {
            $("input[name='uid']").val(data.result);
          });
      }
      else
      {
        $("input[name='uid']").val('');
      }
    });
    
    <#if oj_style != "slate">
    $("#user-list").tablecloth({
      theme:"stats",
      condensed:true,
      sortable:false,
      striped:true,
      clean:true
    });
    </#if>

    $(function() {
      $('#addUser').submit(function() {
        var that = $(this);
        var cid = $('input[name=cid]').val();
        var uid = $('input[name=uid]').val();
        var name = $('input[name=name]').val();
        $.post($(this).attr("action"), $('#addUser').serialize(),
          function(data) {
            switch(data.result)
            {
              case 0:
                var html = '<tr class="user" uid="' + uid + '">' +
                          '<td class="uid"><a href="user/profile/' + name + '">' + uid + '</a></td>' +
                          '<td class="name"><a href="user/profile/' + name + '">' + name + '</a></td>' +
                          '<td class="admin"><#if serverTime<contest.startTime><button class="btn btn-danger remove" uid="' + uid + '">Remove</button></#if></td>' +
                          '</tr>';
                that.parent().before(html);
                break;
              case 1:
                $.dialog({
                  content: 'Db error.',
                  time: 1.5
                });
                break;
              case 2:
                $.dialog({
                  content: 'Duplicate user for this contest.',
                  time: 1.5
                });
                break;
              case 3:
                $.dialog({
                  content: 'This user does not exist.',
                  time: 1.5
                });
                break;
              case 4:
                $.dialog({
                  content: 'Contest already finished.',
                  time: 1.5
                });
                break;
            }
          });
        return false;
      });
      $('table').on('click', '.remove', function() {
        var that = $(this);
        $.dialog({
          title: 'Remove user from contest',
          content: 'Are you sure?',
          cancelVal: 'Cancel',
          cancel: true,
          okVal: 'Remove',
          ok: function() {
            $.post('api/contest/removeUser', {cid:${contest.cid!}, uid:that.attr('uid')}, function(data) {
              if (data.result > 0) {
                  that.parent().parent().remove();
                  $.dialog({
                    content: 'User removed.',
                    time: 1
                  });
                }
                else
                {
                  $.dialog({
                    content: data.result,
                    time: 1.5
                  });
                }
            });
            this.close();
            return false;
          }
        });
      });
    });
  });
</script>
</@override>
<@extends name="_layout.html" />
